<template>
  <view class="container">
    <!-- 固定顶部导航栏 -->
    <!-- <view class="fixed-header" :style="fixedHeaderStyle">
     
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    </view> -->

    <!-- 内容区域，添加顶部间距 -->
    <view class="content-area">
      <!-- 轮播图区域 -->
      <swiper class="banner-swiper" @change="onSwiperChange" circular autoplay>
        <swiper-item v-for="(item, index) in merchantMedia.promoteUrls" :key="index">
          <image class="banner-img" :src="item.url" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

      <!-- 机构信息卡片 -->
      <view class="org-card">
        <!-- 顶部：名称、公司 -->
        <view class="org-header" @click="goToShopDetail">
          <image class="org-logo" :src="logo" mode="aspectFill" />
          <view class="org-text">
            <view class="org-name">{{ merchantItem.shopName || '店铺名称' }}
              <text style="font-size: 24rpx;">{{ merchantItem.branchName }}</text>
            </view>
            <view class="org-company">{{ merchantInfo.name || '公司名称' }}</view>
          </view>
        </view>

        <!-- 评分行 -->
        <view class="org-rating">
          <u-icon name="star" size="17" color="#ff9900"></u-icon>
          <text class="rating">{{ merchantItem.rate || '暂无' }}</text>
          <text class="rating-desc">{{ merchantItem.comments || 0 }}条 {{ merchantItem.comments || 0 }}人评价</text>
          <text class="category">{{ merchantItem.businessType }}</text>
        </view>

        <!-- 营业状态 + 电话 -->
        <view class="org-business">
          <view class="business-info">
            <text class="status" :class="merchantItem.shopStatus == 1 ? 'status-open' : 'status-closed'">
              {{ merchantItem.shopStatus == 1 ? '营业中' : '休息中' }}
            </text>
            <text class="time">{{ merchantItem.shopHours || '周一至周日 10:00-20:00' }}</text>
          </view>
          <u-icon name="phone" size="18" color="#00cc66" class="icon-phone" @click="makeCall"></u-icon>
        </view>

        <!-- 地址 + 定位 -->
        <view class="org-address">
          <view class="address-text">
            <text class="address">{{ merchantItem.address || '' }}</text>
            <text class="distance">距离 {{ merchantItem.distance || '1.2km' }}</text>
          </view>
          <u-icon name="map" size="18" color="#1989fa" @click="openLocation" class="icon-map"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request.js';
export default {
  data() {
    return {
      // 使用缓存的导航栏高度
      statusBarHeight: 0,
      navbarTotalHeight: 0,
      navbarHeight: 0,
      topTabIndex: 1,
      currentTab: 0, // 底部标签栏当前选中项
      currentBanner: 0, // 当前轮播图索引
      promoteUrls: [],
      merchantItem: {},
      merchantMedia: {},
      logo: '',
      merchantInfo: {},
      productId: '',
      // 加载状态
      loading: true
    };
  },
  async onLoad(options) {
    console.log('options:', options);
    const spuId = options.spuId;
    this.productId = spuId;
    // 获取缓存的导航栏高度
    this.initNavbarHeight();
    await this.getMerchantInfo(spuId);
    await this.fetchMerchantItem();
    await this.getMerchantMedia();
  },
  computed: {
    // 固定头部样式
    fixedHeaderStyle() {
      return {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 999,
        backgroundColor: '#ffffff',
        boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.1)'
      }
    },

    // 标题导航栏样式
    titleNavbarStyle() {
      return {
        height: this.navbarHeight + 'px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffffff'
      }
    },


    // 滑动指示器样式
    indicatorStyle() {
      const itemWidth = 100 / this.topTab.length // 每个按钮的宽度百分比
      return {
        left: (this.topTabIndex * itemWidth) + '%',
        width: itemWidth + '%'
      }
    }
  },
  methods: {
    // 初始化导航栏高度
    initNavbarHeight() {
      // 使用全局注册的navbarUtil方法
      this.statusBarHeight = this.$navbarUtil.getStatusBarHeight()
      this.navbarHeight = this.$navbarUtil.getNavbarHeight()
      this.navbarTotalHeight = this.$navbarUtil.getNavbarTotalHeight()

      console.log('店铺页面 - 导航栏高度:', {
        statusBarHeight: this.statusBarHeight,
        navbarHeight: this.navbarHeight,
        navbarTotalHeight: this.navbarTotalHeight
      })
    },
    //获取商户基本信息
    async getMerchantInfo(spuId) {
      try {
        const res = await request({
          url: `/merchant/getMerchant?spuId=${spuId}`,
          method: 'GET',
          loading: true
        });
        this.merchantInfo = res?.data || {};
        console.log('商户信息', this.merchantInfo);
      } catch (e) {
        console.error('获取商户信息失败', e);
        this.merchantInfo = this.merchantInfo || {};
      }
    },
    // 调用商家基本信息接口
    async fetchMerchantItem() {
      try {
        if (!this.merchantInfo || !this.merchantInfo.id) return;
        const res = await request({
          url: `/merchant-item/getByMerchantId?merchantId=${this.merchantInfo.id}`,
          method: 'GET',
          loading: false
        });
        console.log('商家基本信息', res.data)
        if (res.code === 200) {
          this.merchantItem = res.data || {};
          // 更新页面显示的商家信息
          this.merchantItem.businessType = this.getbusinessType();
        }
      } catch (err) {
        console.error('获取商家详细信息失败', err);
      }
    },
    //获取商家媒体信息
    async getMerchantMedia() {
      try {
        if (!this.merchantInfo || !this.merchantInfo.id) return;
        const res = await request({
          url: `/merchantMedia/${this.merchantInfo.id}`,
          method: 'GET',
          loading: true
        });
        this.merchantMedia = res?.data || {};
        console.log('商户媒体信息', this.merchantMedia);
        const logos = this.merchantMedia?.logoUrls || [];
        this.logo = (logos[0] && logos[0].url) || (logos[1] && logos[1].url) || '';
        console.log('商户logo', this.logo);
      } catch (e) {
        console.error('获取商户媒体信息失败', e);
      }
    },
    goToShopDetail() {
      uni.navigateTo({ url: `/public/merchant/shopDetail/index?productId=${this.productId}` });
    },
    onSwiperChange(e) {
      this.currentBanner = e.detail.current;
    },
    changeTopTab(e) {
      this.topTabIndex = e.index;
      if (e.index === 0) {
        // 首页
        uni.redirectTo({ url: '/pages/merchant/index/index' });
      }
      // 当前已是店铺页面，无需跳转
    },

    // 切换底部标签栏
    switchTab(index) {
      this.currentTab = index;
      // 可以根据不同的tab索引加载不同内容或跳转到不同页面
      switch (index) {
        case 0:
          // 商品/服务
          console.log('切换到商品/服务');
          break;
        case 1:
          // 指导团队
          console.log('切换到指导团队');
          break;
        case 2:
          // 更多服务
          console.log('切换到更多服务');
          break;
        case 3:
          // 用户评价
          console.log('切换到用户评价');
          break;
      }
    },


    getbusinessType() {
      if (this.merchantInfo.businessType == 1) {
        return '景区'
      } else if (this.merchantInfo.businessType == 2) {
        return '旅行社'
      } else if (this.merchantInfo.businessType == 3) {
        return '教培'
      } else {
        return '其他'
      }
    },
    // 拨打电话
    makeCall() {
      if (this.merchantInfo.phone) {
        uni.makePhoneCall({
          phone: this.merchantInfo.phone,
          fail: (err) => {
            console.log('拨打电话失败', err);
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '暂无联系电话',
          icon: 'none'
        });
      }
    },

    // 打开地图
    openLocation() {
      if (this.merchantItem.address) {
        // 模拟经纬度信息
        const latitude = 39.9042;
        const longitude = 116.4074;

        uni.openLocation({
          latitude: this.merchantItem.latitude || latitude,
          longitude: this.merchantItem.longitude || longitude,
          name: `${this.merchantItem.name}`,
          address: this.merchantItem.address,
          fail: (err) => {
            console.log('打开地图失败', err);
            uni.showToast({
              title: '打开地图失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '暂无地址信息',
          icon: 'none'
        });
      }
    }
  },
};
</script>

<style scoped>
/* 全局样式 */
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 固定头部样式 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.status-bar {
  width: 100%;
  background-color: inherit;
}

/* 标题导航栏样式 */
.title-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.switch-container {
  position: relative;
  display: flex;
  width: 200rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  overflow: hidden;
}

.switch-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666666;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.switch-item.active {
  color: #ffffff;
  font-weight: 600;
}

.switch-indicator {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #007AFF;
  border-radius: 30rpx;
  transition: all 0.3s ease;
  z-index: 1;
}

/* 内容区域样式 */
.content-area {
  /* padding-top: 0; */
  /* 由computed动态设置 */
}

.org-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.org-text {
  flex: 1;
}

.org-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 22rpx;
  margin-right: 20rpx;
  /* 控制logo与文字之间的间距 */
}

.org-tex {
  flex: 2;
}

.tab-container {
  width: 33%;
  display: flex;
  justify-content: center;
  padding: 20rpx;
  border-radius: 20rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.banner-swiper {
  width: 100%;
  height: 600rpx;
  position: relative;
  background-color: #f0f0f0;
}

.image-count {
  position: absolute;
  bottom: 70rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  z-index: 10;
}


/* 机构卡片 */
.org-card {
  position: absolute;
  top: 550rpx;
  left: 20rpx;
  right: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

/* 名称 */
.org-name {
  font-size: 30rpx;
  color: #29292b;
  margin-bottom: 6rpx;
}

.org-company {
  font-size: 28rpx;
  color: #606266;
}

/* 评分区域 */
.org-rating {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.rating {
  font-size: 32rpx;
  color: #ff9900;
  margin: 0 10rpx;
}

.rating-desc {
  flex: 1;
  font-size: 28rpx;
  color: #606266;
}

.category {
  background-color: #f0f9ff;
  color: #1989fa;
  font-size: 26rpx;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
}

/* 营业状态 */
.org-business {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.status-open {
  color: #00cc66;
  background-color: #e8f9f1;
}

.status-closed {
  color: #909399;
  background-color: #f5f5f5;
}

.time {
  font-size: 28rpx;
  color: #606266;
}

/* 地址行 */
.org-address {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
}

.address-text {
  flex: 1;
}

.address {
  font-size: 28rpx;
  color: #303133;
  line-height: 48rpx;
  display: block;
}

.distance {
  font-size: 26rpx;
  color: #909399;
}


/* 图标样式 */
.icon-arrow {
  transition: transform 0.3s;
}

.icon-arrow:active {
  transform: scale(0.9);
}

.icon-phone,
.icon-map {
  transition: all 0.3s;
  padding: 10rpx;
  border-radius: 50%;
}

.icon-phone:active,
.icon-map:active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}

/* 服务区域 */
.services-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #303133;
}

.services-grid {
  display: flex;
  justify-content: space-between;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.service-item .service-text {
  font-size: 26rpx;
  color: #606266;
  margin-top: 16rpx;
}

/* 推荐区域 */
.recommend-section {
  margin: 20rpx;
  margin-bottom: 140rpx;
}

.recommend-list {
  display: flex;
  justify-content: space-between;
}

.recommend-item {
  width: 48%;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.recommend-img {
  width: 100%;
  height: 240rpx;
}

.recommend-info {
  padding: 20rpx;
}

.recommend-title {
  font-size: 28rpx;
  color: #303133;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-price {
  font-size: 32rpx;
  color: #f56c6c;
  font-weight: bold;
}

.price-unit {
  font-size: 24rpx;
  color: #f56c6c;
  font-weight: normal;
}

/* 底部标签栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0 20rpx 0;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
  transition: all 0.3s;
}

.tab-item:active {
  opacity: 0.7;
}

.tab-item text {
  font-size: 24rpx;
  color: #909399;
  margin-top: 8rpx;
}

.tab-active text {
  color: #1989fa;
}
</style>
